<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 350px;
            height: 350px;
            margin: 100px 0 0 100px;
            
            position: relative;

        }
        #small_box{
            width: 100%;
            height: 100%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            background: url("./img/pic01.jpg") no-repeat;
            background-size: cover;
            position: relative;
        }
        #small_box img{
            width: 100%;
            height: 100%;
        }
        #mask{
            width: 100px;
            height: 100px;
            background-color: rgba(255, 255, 0, .3);

            position: absolute;
            left: 0;
            top: 0;
            cursor: move;
            /*隐藏*/
            display: none;
        }
        #big_box{
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;

            position: absolute;
            left: 360px;
            top: 0;
            overflow: hidden;

            display: none;
        }
        #big_box img{
            position: absolute;
            left: 0;
            top: 0;
        }
        #list{
            margin: 20px 0 0 100px;
        }
        #list ul li{
            float: left;
            margin: 5px;
            cursor: pointer;
        }
        .broundImg {
            width: 50px;
            height: 50px;
            background: url("./img/pic01.jpg") no-repeat;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="box">
        <!-- 小盒子 -->
        <div id="small_box">
            <!-- <img src="./img/pic001.jpg" alt=""> -->
            <span id="mask"></span>
        </div>
        <div id="big_box">
            <img src="./img/pic01.jpg" alt="">
        </div>
    </div>
    <div id="list">
        <ul>
            <li class="broundImg"></li>
            <!-- <li><img src="./img/pic0001.jpg" alt=""></li> -->
            <li><img src="./img/pic0002.jpg" alt=""></li>
            <li><img src="./img/pic0003.jpg" alt=""></li>
        </ul>
    </div>

    <script>
        window.addEventListener('load',function(){
            //获取标签
            let s_box = $('box').children[0];
            let b_box = $('box').children[1];
            let mask = s_box.children[0];
            let b_img = b_box.children[0];
            let all_list = $('list').getElementsByTagName('li');

            //接听鼠标进入小盒子
            s_box.addEventListener('mouseover',function(){
                //显示隐藏的放大镜
                mask.style.display = 'block';
                //显示隐藏的大盒子
                b_box.style.display = 'block';

                //接听鼠标的移动
                s_box.addEventListener('mousemove',function(event){
                    //获取光标的位置
                    let pointX = event.X - $('box').offsetLeft - mask.offsetWidth*0.5;
                    let pointY = event.pageY - $('box').offsetTop - mask.offsetHeight*0.5;

                    //边界检测
                    if(pointX<0){
                        pointX = 0;
                    }else if(pointX> s_box.offsetWidth - mask.offsetWidth - 2){
                        pointX =s_box.offsetWidth - mask.offsetWidth - 2;
                    }
                    if(pointY<0){
                        pointY = 0;
                    }else if(pointY> s_box.offsetHeight - mask.offsetHeight - 2){
                        pointY =s_box.offsetHeight - mask.offsetHeight - 2;
                    }

                    //让放大镜走起来
                    mask.style.left = pointX + 'px';
                    mask.style.top = pointY + 'px';

                    //让大盒子中的图片走起来
                    //小盒子宽度/大盒子宽度 = 小盒子走的距离 /大盒子的距离
                    b_img.style.left = -pointX/(s_box.offsetWidth / b_box.offsetWidth) + 'px'
                    b_img.style.top = -pointY/(s_box.offsetHeight / b_box.offsetHeight) + 'px'
                })
                //遍历所有的图片
                for(let i = 0; i<all_list.length;i++){
                    let li = all_list[i];
                    li.addEventListener('mouseover',function(){
                        s_box.children[0].src = `./img/pic00${i+1}.jpg`
                        b_img.src = `./img/pic0${i+1}.jpg`
                    })
                }
            })
            
            //接听鼠标离开小盒子
            s_box.addEventListener('mouseout',function(){
                //显示隐藏的放大镜
                mask.style.display = 'none';
                //显示隐藏的大盒子
                b_box.style.display = 'none';
            })
        })

        function $(id){
            return typeof id === 'string' ? document.getElementById(id) : null; 
        }
    </script>
</body>
</html>